<template>
  <view class="search">
    <view class="search-box" :style="{'background-color':bgColor}" @click="toSearch">
      <view class="box" :style="{'border-radius':radius + 'px'}">
        <uni-icons type="search" size="20"></uni-icons>
        搜索
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      // 背景颜色
      bgColor: {
        type: String,
        default: '#c00000'
      },
      // 圆角尺寸
      radius: {
        type: Number,
        default: 18
      }
    },
    name: "my-search",
    data() {
      return {

      };
    },
    methods:{
      toSearch(){
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    height: 40px;
    padding: 8px 10px;
  
  // background-color: #c00000;
    .box {
      height: 40px;
      // border-radius: 20px;
      line-height: 40px;
      background-color: #fff;
      font-size: 14px;
      display: flex;
      justify-content: center;
    }
  }
</style>
